<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        #p1{
            color:red;
        }
        #p2{
            color:green;
        }
        .c1{
            background-color: pink;
            color:yellow;
        }
        p{
            font-size: 20px;
            color:indianred;
        }
        *{
            color:blue!important;
        }
    </style>
</head>
<body>
<!--
    在CSS中,存在四种基本选择器
    1.id选择器
        根据标签的id属性值进行匹配
        在一个HTML文档中,id属性值不能重复
        因此,匹配到的元素有且仅有一个
        语法:
            #id属性值{...}
    2.class选择器
        根据标签的class属性值进行匹配
        在一个HTML文档中,任意一个标签均拥有class属性
        且class属性值可以重复
        因此,可以匹配到的无数个元素
        语法:
            .class属性值{...}
    3.标签选择器
        根据标签名进行匹配
        可以匹配无数个元素
        语法:
            标签名{...}
    4.*选择器
        匹配当前HTML文档中一切
        语法:
            *{...}
    基本选择器优先级问题
        id选择器>class选择器>标签选择器>*选择器
        也支持!important破坏优先级的用法
-->
<p id="p1">第1个段落</p>
<p class="c1" id="p2">第2个段落</p>
<p class="c1">第3个段落</p>
<p class="c1">第4个段落</p>
<p>第5个段落</p>
<p>第6个段落</p>
</body>
</html>